<!--
  在该文件中生成预览元素
-->
<template>
  <div>
    <el-form ref="generateForm"
             :label-suffix="data.config.labelSuffix"
             :size="data.config.size"
             :model="models"
             :rules="rules"
             :label-position="data.config.labelPosition"
             :label-width="data.config.labelWidth + 'px'"
             :hide-required-asterisk="data.config.hideRequiredAsterisk"
             :show-message="data.config.showMessage"
             :inline-message="data.config.inlineMessage"
             :status-icon="data.config.statusIcon"
             :validate-on-rule-change="data.config.validateOnRuleChange"
             :disabled="data.config.disabled"
             :style="{padding: data.config.padding}"
    >
      <template v-for="item in data.list">

<!-- 开始渲染预览组件       -->
        <template v-if="item.type == 'grid'">
          <el-row
            :key="item.key"
            type="flex"
            :gutter="item.options.gutter ? item.options.gutter : 0"
            :justify="item.options.justify"
            :align="item.options.align"
          >
            <el-col v-for="(col, colIndex) in item.columns" :key="colIndex" :span="col.span">


              <template v-for="citem in col.list" >
                <el-form-item v-if="citem.type=='blank'" :label="citem.name" :prop="citem.model" :key="citem.key">
                  <slot :name="citem.model" :model="models"></slot>
                </el-form-item>
                <el-form-item v-else-if="citem.type=='divider'" :key="citem.key">
                  <el-divider :content-position="citem.options.contentPosition">
                    {{citem.name}}
                  </el-divider>
                </el-form-item>
                <genetate-form-item v-else
                  :key="citem.key"
                  :models.sync="models"
                  :remote="remote"
                  :rules="rules"
                  :widget="citem"
                  @input-change="onInputChange">
                </genetate-form-item>
              </template>
            </el-col>
          </el-row>
        </template>

        <template v-else-if="item.type == 'blank'">
          <el-form-item :label="item.name" :prop="item.model" :key="item.key">
            <slot :name="item.model" :model="models"></slot>
          </el-form-item>
        </template>

        <template v-else-if="item.type == 'divider'">
          <el-divider :content-position="item.options.contentPosition" :key="item.key">
            {{item.name}}
          </el-divider>
        </template>

        <template v-else-if="item.type == 'card'">
          <el-card :key="item.key" :header="item.name" :body-style="item.options.bodyStyle"
                   :shadow="item.options.shadow"
                   :style="{width: item.options.style.width}">
            <template v-for="cardx in item.list">
              <template v-if="cardx.type == 'grid'">
                <el-row
                        :key="cardx.key"
                        type="flex"
                        :gutter="cardx.options.gutter ? cardx.options.gutter : 0"
                        :justify="cardx.options.justify"
                        :align="cardx.options.align"
                >
                  <el-col v-for="(col, colIndex) in cardx.columns" :key="colIndex" :span="col.span">


                    <template v-for="citem in col.list" >
                      <el-form-item v-if="citem.type=='blank'" :label="citem.name" :prop="citem.model" :key="citem.key">
                        <slot :name="citem.model" :model="models"></slot>
                      </el-form-item>
                      <el-form-item v-else-if="citem.type=='divider'" :key="citem.key">
                        <el-divider :content-position="citem.options.contentPosition">
                          {{citem.name}}
                        </el-divider>
                      </el-form-item>
                      <genetate-form-item v-else
                                          :key="citem.key"
                                          :models.sync="models"
                                          :remote="remote"
                                          :rules="rules"
                                          :widget="citem"
                                          @input-change="onInputChange">
                      </genetate-form-item>
                    </template>
                  </el-col>
                </el-row>
              </template>
              <template v-else-if="item.type == 'blank'">
                <el-form-item :label="cardx.name" :prop="cardx.model" :key="cardx.key">
                  <slot :name="cardx.model" :model="models"></slot>
                </el-form-item>
              </template>
              <template v-else-if="cardx.type == 'divider'">
                <el-divider :content-position="cardx.options.contentPosition" :key="cardx.key">
                  {{cardx.name}}
                </el-divider>
              </template>
              <template v-else>
                <genetate-form-item
                        :key="cardx.key"
                        :models.sync="models"
                        :rules="rules"
                        :widget="cardx"
                        @input-change="onInputChange"
                        :remote="remote">
                </genetate-form-item>
              </template>
            </template>
          </el-card>
        </template>

        <template v-else>
          <genetate-form-item
            :key="item.key"
            :models.sync="models"
            :rules="rules"
            :widget="item"
            @input-change="onInputChange"
            :remote="remote">
          </genetate-form-item>
        </template>

      </template>
    </el-form>
  </div>
</template>

<script>
import GenetateFormItem from './GenerateFormItem'
import {loadJs} from '../util/index.js'

export default {
  name: 'fm-generate-form',
  components: {
    GenetateFormItem
  },
  props: ['data', 'remote', 'value', 'insite'],
  data () {
    return {
      models: {},
      rules: {}
    }
  },
  created () {
    this.generateModle(this.data.list)
  },
  mounted () {
  },
  methods: {
    generateModle (genList) {
      for (let i = 0; i < genList.length; i++) {
        if (genList[i].type === 'grid') {
          genList[i].columns.forEach(item => {
            this.generateModle(item.list)
          })
        }
        // else if (genList[i].type === 'card') {
        //     this.generateModle(genList[i].list)
        // }
        else {
          if (this.value && Object.keys(this.value).indexOf(genList[i].model) >= 0) {
            this.models[genList[i].model] = this.value[genList[i].model]
          } else {
            if (genList[i].type === 'blank') {
              this.$set(this.models, genList[i].model, genList[i].options.defaultType === 'String' ? '' : (genList[i].options.defaultType === 'Object' ? {} : []))
            } else {
              this.models[genList[i].model] = genList[i].options.defaultValue
            }
          }

          if (this.rules[genList[i].model]) {

            this.rules[genList[i].model] = [...this.rules[genList[i].model], ...genList[i].rules.map(item => {
              if (item.pattern) {
                return {...item, pattern: eval(item.pattern)}
              } else {
                return {...item}
              }
            })]
          } else {

            this.rules[genList[i].model] = [...genList[i].rules.map(item => {
              if (item.pattern) {
                return {...item, pattern: eval(item.pattern)}
              } else {
                return {...item}
              }
            })]
          }
        }
      }
    },
    getData () {
      return new Promise((resolve, reject) => {
        this.$refs.generateForm.validate(valid => {
          if (valid) {
            resolve(this.models)
          } else {
            reject(new Error(this.$t('fm.message.validError')).message)
          }
        })
      })
    },
    reset () {
      this.$refs.generateForm.resetFields()
    },
    onInputChange (value, field) {
      this.$emit('on-change', field, value, this.models)
    },
    refresh () {

    }
  },
  watch: {
    data: {
      deep: true,
      handler (val) {
        this.generateModle(val.list)
      }
    },
    value: {
      deep: true,
      handler (val) {
        console.log(JSON.stringify(val))
        this.models = {...this.models, ...val}
      }
    }
  }
}
</script>

<style lang="scss">
// @import '../styles/cover.scss';
</style>
